<template>
    <div class="auth-form">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item prop="identity">
          <el-input
            v-model="form.identity"
            placeholder="请输入手机号或昵称"
            autocomplete="off"
          />
        </el-form-item>
  
        <el-form-item v-if="showPassword" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            autocomplete="new-password"
          />
        </el-form-item>
  
        <el-form-item v-if="isRegister" prop="nickname">
          <el-input
            v-model="form.nickname"
            placeholder="请输入昵称（注册时必填）"
            autocomplete="off"
          />
        </el-form-item>
  
        <el-form-item v-if="isForgetPassword">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-input
                v-model="form.email"
                placeholder="请输入注册邮箱"
                autocomplete="off"
              />
            </el-col>
            <el-col :span="8">
              <el-button :disabled="!form.email || sendingCode" @click="getEmailCode">
                {{ sendingCode ? '发送中...' : '获取验证码' }}
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
  
        <el-form-item v-if="isForgetPassword" prop="code">
          <el-input
            v-model="form.code"
            placeholder="请输入邮箱验证码"
            autocomplete="off"
          />
        </el-form-item>
  
        <el-form-item v-if="isForgetPassword" prop="newPassword">
          <el-input
            v-model="form.newPassword"
            type="password"
            placeholder="请输入新密码"
            autocomplete="new-password"
          />
        </el-form-item>
  
        <el-form-item>
          <el-button
            :class="buttonClass"
            :loading="loading"
            @click="handleSubmit"
          >
            {{ buttonText }}
          </el-button>
          <el-link v-if="showSwitch" @click="switchAuthType">
            {{ switchText }}
          </el-link>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      type: {
        type: String,
        required: true,
        values: ['login', 'register', 'forget']
      }
    },
    data() {
      return {
        form: {
          identity: '', // 登录/注册时的手机号/昵称
          password: '',
          nickname: '',
          email: '',
          code: '',
          newPassword: ''
        },
        rules: {
          identity: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
          email: [{ required: true, message: '请输入邮箱', trigger: 'blur', type: 'email' }],
          code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
          newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
        },
        loading: false,
        sendingCode: false,
        showPassword: true,
        showSwitch: true
      }
    },
    computed: {
      isRegister() {
        return this.type === 'register'
      },
      isForgetPassword() {
        return this.type === 'forget'
      },
      buttonClass() {
        return this.type === 'login' ? 'el-button--primary' : 'el-button--success'
      },
      buttonText() {
        return this.type === 'login' ? '登录' : this.type === 'register' ? '注册' : '重置密码'
      },
      switchText() {
        return this.type === 'login' 
          ? '没有账号？去注册' 
          : this.type === 'register' 
            ? '已有账号？去登录' 
            : '返回登录'
      }
    },
    methods: {
      async handleSubmit() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.loading = true
            try {
              let res
              if (this.type === 'login') {
                res = await this.$store.dispatch('user/login', this.form)
                if (res) {
                  this.$message.success('登录成功')
                  this.$router.push('/user-center')
                }
              } else if (this.type === 'register') {
                res = await this.$store.dispatch('user/register', this.form)
                if (res) {
                  this.$message.success('注册成功，请登录')
                  this.$router.push('/login')
                }
              } else if (this.type === 'forget') {
                res = await this.$store.dispatch('user/resetPassword', this.form)
                if (res) {
                  this.$message.success('密码重置成功，请登录')
                  this.$router.push('/login')
                }
              }
            } catch (error) {
              this.$message.error(error.message || '操作失败')
            } finally {
              this.loading = false
            }
          }
        })
      },
      async getEmailCode() {
        if (!this.form.email) {
          this.$message.warning('请输入邮箱')
          return
        }
        
        this.sendingCode = true
        try {
          await this.$store.dispatch('user/sendEmailCode', this.form.email)
          this.$message.success('验证码已发送至您的邮箱')
          
          // 倒计时
          let countdown = 60
          const timer = setInterval(() => {
            countdown--
            this.buttonText = `${countdown}秒后重新发送`
            if (countdown <= 0) {
              clearInterval(timer)
              this.sendingCode = false
              this.buttonText = '获取验证码'
            }
          }, 1000)
        } catch (error) {
          this.$message.error(error.message || '发送失败')
          this.sendingCode = false
        }
      },
      switchAuthType() {
        if (this.type === 'login') {
          this.$router.push('/register')
        } else if (this.type === 'register') {
          this.$router.push('/login')
        } else if (this.type === 'forget') {
          this.$router.push('/login')
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .auth-form {
    width: 100%;
  }
  </style>    